<template>
	<div class="regist">
		<top show="true" back='true' title='注册' @backBtn='backBtn'></top>
		<div class="regist-up">
			<img :src="data.head_portrait" />
			<div class="up-img">
				<input type="file" id="change" accept="image" @change="change">
				<label for="change"></label>
			</div>
		</div>
		<div class="regist-list">
			<ul>
				<li>
					<div class="regist-l" @click="choose">
						<p>城市</p>
						<p>{{data.province}}-{{data.city}}</p>
					</div>
					<div class="regist-r">
						<img src="../static/img/right.png" />
					</div>
				</li>
				<li>
					<div class="regist-l">
						<p>名字</p>
						<input @blur="name" :value="data.nick_name" placeholder="请输入姓名" />
					</div>

				</li>
				<li @click="varity">
					<div class="regist-l">
						<p>品种</p>
						<p>{{data.variety}}</p>
					</div>
					<div class="regist-r">
						<img src="../static/img/right.png" />
					</div>
				</li>
				<li>
					<div class="regist-l">
						<p>性别</p>
						<img class="woman" src="../static/img/woman-check.png" />
					</div>
					<div class="regist-r">
						<img src="../static/img/right.png" />
					</div>
				</li>
				<li>
					<div class="regist-l">
						<p>体重</p>
						<input @blur="weight" :value="data.recent_weight" placeholder="请输入宝贝体重" />
					</div>
					<div class="regist-r">
						<img src="../static/img/right.png" />
					</div>
				</li>
				<li>
					<div class="regist-l">
						<p>是否绝育</p>
						<div class="ste">
							<div class="ste-l" v-bind:style="check==true?{background:'#6DC0BF',color:'#fff'}:''" :data-static='0' @click="sterilization">
								未绝育
							</div>
							<div class="ste-r" v-bind:style="check==false?{background:'#6DC0BF',color:'#fff'}:''" :data-static='1' @click="sterilization">
								已绝育
							</div>
						</div>
					</div>
					<div class="regist-r">
						<img src="../static/img/right.png" />
					</div>
				</li>
				<li>
					<div class="regist-l" @click="togglePicker1">
						<p>出生日期</p>
						<p>{{data.birthday}}</p>
					</div>
					<div class="regist-r" @click="togglePicker1">
						<img src="../static/img/right.png" />
					</div>
					<v-date-picker :type="1" :isShow="isShow1" @confirm="confirmDemo1" @cancel="cancelDemo1" v-model="birthday"></v-date-picker>
				</li>
				<li>
					<div class="regist-l">
						<p>猫生信条</p>
						<input @blur="creed" :value="data.creed" placeholder="一句话介绍" />
					</div>
					<div class="regist-r">
						<img src="../static/img/right.png" />
					</div>
				</li>
			</ul>
		</div>
		<!--  -->
		<div class="submit">
			<div class="submit-btn" @click="submit">
				<img src='../static/img/register.png' />
				<p>完成注册</p>
			</div>
		</div>
		<div id="demo">
			<!-- 遮罩层 -->
			<div class="container" v-show="panel">
				<div>
					<img id="image" :src="url" alt="Picture">
				</div>

				<button type="button" id="button" @click="crop">确定</button>

			</div>


		</div>
		<!--  -->
		<div class="divwrap" v-if="show">
			<v-distpicker type="mobile" @province="onChangeProvince1" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
		</div>
		<!--遮罩层-->
		<div class="blacks" v-if="show" @click="countermand"></div>
	</div>
	<!--  -->

</template>

<script>
	import top from '@/components/top.vue';
	import VDatePicker from "@/components/datetimepicker";
	import modal from '../routeUrl.js';
	import globaldata from '../globaldata.js';
	import Cropper from 'cropperjs';
	import USER_CACHE from '../cache.js';
	import VDistpicker from 'v-distpicker'

	export default {
		name: "timepickerDemo",

		data() {
			return {
				isShow1: false,
				birthday: '2018-01-01',
				submitType: false,
				headerImage: '',
				picValue: '',
				cropper: '',
				croppable: false,
				panel: false,
				check: false,
				url: '',
				data: {
					birthday: "2018-01-01",
					city: '',
					creed: '',
					head_portrait: '',
					nick_name: '',
					province: '',
					recent_weight: '',
					sex: '',
					sterilization: '',
					variety: '',
					t_id: globaldata.t_id
				},
				lxr: '',
				lxdh: '',
				show: false,
				//省市区
				province: '',
				city: '',
				area: ''
			}
		},
		props: ['ips'],
		components: {
			top,
			VDatePicker,
			VDistpicker
		},
		created() {


			modal.editData(globaldata.t_id).then(res => {

				if (res.code == 1) {
					console.log(res)
					if (this.$store.state.checkVarityName) {
						res.data.variety = this.$store.state.checkVarityName
					}
					this.data = res.data;
					this.birthday = res.data.birthday
				} else {
					alert("关注失败")
				}

			})

		},
		mounted() {
			var self = this;
			var image = document.getElementById('image');
			this.cropper = new Cropper(image, {
				aspectRatio: 1,
				viewMode: 1,
				background: false,
				zoomable: false,
				ready: function() {
					self.croppable = true;
				}
			});

		},
		methods: {
			togglePicker1() {
				this.isShow1 = true;
			},
			sterilization(e) {
				console.log()
				if (e.target.dataset.static == 0) {
					this.check = true
				} else {
					this.check = false
				}
			},
			confirmDemo1(result) {
				console.log(result);
				this.isShow1 = false; //关闭时间选择框
				this.birthday = result;
				this.data.birthday = result;
			},
			cancelDemo1() {
				this.isShow1 = false; //关闭时间选择框
			},
			name(event) {

				this.data.nick_name = event.target.value
			},
			weight(e) {

				this.data.recent_weight = e.target.value
			},
			creed(e) {

				this.data.creed = e.target.value
			},
			varity() {
				this.$router.push({
					name: 'varity'
				})
			},
			backBtn() {

				console.log(this.submitType)
				if (this.submitType == false) {
					this.$store.commit('clearCheckVarityName')
				}
			},
			upload() {
				this.$router.push({
					name: 'headUpload'
				})
			},
			/**
			 * 提交表单
			 */
			submit() {
				this.data.t_id = globaldata.t_id;
				this.data.weight = this.data.recent_weight;
				let parms = this.data;
				modal.editDataPost(parms).then(res => {

					if (res.code == 1) {
						console.log(res)
						//注册成功
						this.submitType = true;
						this.$store.commit('clearCheckVarityName');
						modal.myInfo(globaldata.t_id).then(res => {
							if (res.code == 1) {
								console.log(res)

								USER_CACHE.set('personal', res.data);
							} else {
								alert('获取失败')
							}

						})
						alert("success！")
					} else {
						alert("关注失败")
					}

				})
			},
			getObjectURL(file) {
				var url = null;
				if (window.createObjectURL != undefined) { // basic
					url = window.createObjectURL(file);
				} else if (window.URL != undefined) { // mozilla(firefox)
					url = window.URL.createObjectURL(file);
				} else if (window.webkitURL != undefined) { // webkit or chrome
					url = window.webkitURL.createObjectURL(file);
				}
				return url;
			},
			change(e) {
				let files = e.target.files || e.dataTransfer.files;
				if (!files.length) return;
				this.panel = true;
				this.picValue = files[0];

				this.url = this.getObjectURL(this.picValue);
				//每次替换图片要重新得到新的url
				if (this.cropper) {
					this.cropper.replace(this.url);
				}
				this.panel = true;

			},
			crop() {
				this.panel = false;
				var croppedCanvas;
				var roundedCanvas;

				if (!this.croppable) {
					return;
				}
				// Crop
				croppedCanvas = this.cropper.getCroppedCanvas();
				console.log(this.cropper)
				// Round
				roundedCanvas = this.getRoundedCanvas(croppedCanvas);

				// this.data.head_portrait = roundedCanvas.toDataURL();
				this.postImg();
				console.log(this.cropper.url)
				let parms = {
					image: this.data.head_portrait
				}
				// modal.uploadImg(parms).then(res => {

				// 	if (res.code == 1) {
				// 		console.log(res)
				// 		//注册成功

				// 		alert("success！")
				// 	} else {
				// 		alert("关注失败")
				// 	}

				// })
			},
			getRoundedCanvas(sourceCanvas) {

				var canvas = document.createElement('canvas');
				var context = canvas.getContext('2d');
				var width = sourceCanvas.width;
				var height = sourceCanvas.height;

				canvas.width = width;
				canvas.height = height;

				context.imageSmoothingEnabled = true;
				context.drawImage(sourceCanvas, 0, 0, width, height);
				context.globalCompositeOperation = 'destination-in';
				context.beginPath();
				context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
				context.fill();

				return canvas;
			},
			postImg() {
				//这边写图片的上传
			},
			countermand: function() {
				this.show = false
			},
			//打开选择地区
			choose: function() {
				this.show = true;
			},
			onChangeProvince1: function(a) {
				this.data.province = a.value;
				if (a.value == '台湾省') {
					this.show = false;
				}
			},
			onChangeCity: function(a) {
				this.data.city = a.value;
			},
			onChangeArea: function(a) {
				this.area = a.value;
				this.show = false;
				// this.city = this.province + this.city + this.area;
			}
		}
	}
</script>

<style lang="scss">
	@import '../assets/scss/main.scss';

	html,
	body,
	#app {
		height: 100%;
	}

	.regist {
		background: #fff;
		min-height: 100%;
	}

	.datetime {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.submit-btn img {
		width: px2vw(18);
		height: px2vw(15);
		display: block;
	}

	.woman {
		width: px2vw(33);
		height: px2vw(20);
		display: block;
	}

	.submit {
		padding: px2vw(1) px2vw(20);
		box-sizing: border-box;
	}

	.submit-btn {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		justify-content: center;
	}

	.submit-btn p {
		font-size: px2vw(14);
		margin-left: px2vw(6);
	}

	.submit-btn {
		font-size: px2vw(14);
		color: #FFFFFF;
		text-align: center;
		height: px2vw(45);
		background: #76CBCA;
		border-radius: px2vw(10);
	}

	.regist-list {
		padding: px2vw(27);
		box-sizing: border-box;
	}

	.regist-list ul li {
		margin-bottom: px2vw(24);
	}

	.ste {
		display: flex;
		display: -webkit-flex;
		align-items: center;
	}

	.ste-l {
		font-size: px2vw(11);
		height: px2vw(25);
		width: px2vw(58);
		border-radius: px2vw(25);
		background: #F6F6F6;
		color: #8F98A4;
		line-height: px2vw(25);
		text-align: center;
		margin-right: px2vw(7);
	}

	.ste-r {
		font-size: px2vw(11);
		height: px2vw(25);
		width: px2vw(58);
		border-radius: px2vw(25);
		background: #F6F6F6;
		color: #8F98A4;
		line-height: px2vw(25);
		text-align: center;
	}

	.regist-l p:first-child {
		font-size: px2vw(14);
		color: #A7AEB7;
		margin-right: px2vw(20);
	}

	.regist-l {
		display: flex;
		display: -webkit-flex;
		align-items: center;
	}

	.regist-list ul li {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
	}

	.regist-l p:last-child,
	.regist-l input {
		font-size: px2vw(15);
	}

	.regist-r img {
		width: px2vw(6);
		height: px2vw(10);
		display: block;
	}

	.regist-up img {
		width: px2vw(90);
		height: px2vw(90);
		display: block;
		border-radius: 50%;
		margin: 0 auto;
	}

	.regist-up {
		position: relative;
	}

	.up-img {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
	}

	.up-img input {
		width: px2vw(90);
		height: px2vw(90);
		display: block;
		border-radius: 50%;
		margin: 0 auto;
		opacity: 0;
	}

	#demo #button {
		position: absolute;
		right: 10px;
		top: 10px;
		width: 80px;
		height: 40px;
		border: none;
		border-radius: 5px;
		background: white;
	}

	#demo .show {
		width: 100px;
		height: 100px;
		overflow: hidden;
		position: relative;
		border-radius: 50%;
		border: 1px solid #d5d5d5;
	}

	#demo .picture {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#demo .container {
		z-index: 99;
		position: fixed;
		padding-top: 60px;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 1);
	}

	#demo #image {
		max-width: 100%;
	}

	.cropper-view-box,
	.cropper-face {
		border-radius: 50%;
	}

	/*!
	* Cropper.js v1.0.0-rc
	* https://github.com/fengyuanchen/cropperjs
	*
	* Copyright (c) 2017 Fengyuan Chen
	* Released under the MIT license
	*
	* Date: 2017-03-25T12:02:21.062Z
	*/

	.cropper-container {
		font-size: 0;
		line-height: 0;

		position: relative;

		-webkit-user-select: none;

		-moz-user-select: none;

		-ms-user-select: none;

		user-select: none;

		direction: ltr;
		-ms-touch-action: none;
		touch-action: none
	}

	.cropper-container img {
		/* Avoid margin top issue (Occur only when margin-top <= -height) */
		display: block;
		min-width: 0 !important;
		max-width: none !important;
		min-height: 0 !important;
		max-height: none !important;
		width: 100%;
		height: 100%;
		image-orientation: 0deg
	}

	.cropper-wrap-box,
	.cropper-canvas,
	.cropper-drag-box,
	.cropper-crop-box,
	.cropper-modal {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.cropper-wrap-box {
		overflow: hidden;
	}

	.cropper-drag-box {
		opacity: 0;

	}

	.cropper-modal {
		opacity: .5;

	}

	.cropper-view-box {
		display: block;
		overflow: hidden;

		width: 100%;
		height: 100%;

		outline: 1px solid #39f;
		outline-color: rgba(51, 153, 255, 0.75);
	}

	.cropper-dashed {
		position: absolute;

		display: block;

		opacity: .5;
		border: 0 dashed #eee
	}

	.cropper-dashed.dashed-h {
		top: 33.33333%;
		left: 0;
		width: 100%;
		height: 33.33333%;
		border-top-width: 1px;
		border-bottom-width: 1px
	}

	.cropper-dashed.dashed-v {
		top: 0;
		left: 33.33333%;
		width: 33.33333%;
		height: 100%;
		border-right-width: 1px;
		border-left-width: 1px
	}

	.cropper-center {
		position: absolute;
		top: 50%;
		left: 50%;

		display: block;

		width: 0;
		height: 0;

		opacity: .75
	}

	.cropper-center:before,
	.cropper-center:after {
		position: absolute;
		display: block;
		content: ' ';

	}

	.cropper-center:before {
		top: 0;
		left: -3px;
		width: 7px;
		height: 1px
	}

	.cropper-center:after {
		top: -3px;
		left: 0;
		width: 1px;
		height: 7px
	}

	.cropper-face,
	.cropper-line,
	.cropper-point {
		position: absolute;

		display: block;

		width: 100%;
		height: 100%;

		opacity: .1;
	}

	.cropper-face {
		top: 0;
		left: 0;


	}

	.cropper-line {}

	.cropper-line.line-e {
		top: 0;
		right: -3px;
		width: 5px;
		cursor: e-resize
	}

	.cropper-line.line-n {
		top: -3px;
		left: 0;
		height: 5px;
		cursor: n-resize
	}

	.cropper-line.line-w {
		top: 0;
		left: -3px;
		width: 5px;
		cursor: w-resize
	}

	.cropper-line.line-s {
		bottom: -3px;
		left: 0;
		height: 5px;
		cursor: s-resize
	}

	.cropper-point {
		width: 5px;
		height: 5px;

		opacity: .75;

	}

	.cropper-point.point-e {
		top: 50%;
		right: -3px;
		margin-top: -3px;
		cursor: e-resize
	}

	.cropper-point.point-n {
		top: -3px;
		left: 50%;
		margin-left: -3px;
		cursor: n-resize
	}

	.cropper-point.point-w {
		top: 50%;
		left: -3px;
		margin-top: -3px;
		cursor: w-resize
	}

	.cropper-point.point-s {
		bottom: -3px;
		left: 50%;
		margin-left: -3px;
		cursor: s-resize
	}

	.cropper-point.point-ne {
		top: -3px;
		right: -3px;
		cursor: ne-resize
	}

	.cropper-point.point-nw {
		top: -3px;
		left: -3px;
		cursor: nw-resize
	}

	.cropper-point.point-sw {
		bottom: -3px;
		left: -3px;
		cursor: sw-resize
	}

	.cropper-point.point-se {
		right: -3px;
		bottom: -3px;
		width: 20px;
		height: 20px;
		cursor: se-resize;
		opacity: 1
	}

	@media (min-width: 768px) {

		.cropper-point.point-se {
			width: 15px;
			height: 15px
		}
	}

	@media (min-width: 992px) {

		.cropper-point.point-se {
			width: 10px;
			height: 10px
		}
	}

	@media (min-width: 1200px) {

		.cropper-point.point-se {
			width: 5px;
			height: 5px;
			opacity: .75
		}
	}

	.cropper-point.point-se:before {
		position: absolute;
		right: -50%;
		bottom: -50%;
		display: block;
		width: 200%;
		height: 200%;
		content: ' ';
		opacity: 0;

	}

	.cropper-invisible {
		opacity: 0;
	}

	.cropper-bg {
		background-image: url('');
	}

	.cropper-hide {
		position: absolute;

		display: block;

		width: 0;
		height: 0;
	}

	.cropper-hidden {
		display: none !important;
	}

	.cropper-move {
		cursor: move;
	}

	.cropper-crop {
		cursor: crosshair;
	}

	.cropper-disabled .cropper-drag-box,
	.cropper-disabled .cropper-face,
	.cropper-disabled .cropper-line,
	.cropper-disabled .cropper-point {
		cursor: not-allowed;
	}

	.blacks {
		position: fixed;
		width: 100%;
		height: 50%;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.45);
	}

	/*省市区三级联动*/
	.divwrap {
		height: 50%;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 99;
	}

	/*外部*/
	.divwrap>.distpicker-address-wrapper {
		color: #0d0d0d;
		height: 100%;
	}

	/*头部*/
	.divwrap>>>.address-header {
		background: #000;
		color: #fff;
		width: 100%;
		position: fixed;
		bottom: 50%;
		height: 0.5rem;
		font-size: 0.2rem;
	}

	/*头部内容*/
	.divwrap>>>.address-header ul li {
		flex-grow: 1;
		text-align: center;
	}

	/*选择过省市区的头部*/
	.divwrap>>>.address-header .active {
		color: #fff;
		border-bottom: 0.05rem solid #666;
	}

	/*内容部分*/
	.divwrap>>>.address-container {
		overflow: scroll;
		height: 100%;
	}

	/*点过的地区内容*/
	.divwrap>>>.address-container .active {
		color: red;
	}
</style>
